<template>
  <div class="sales-table-wrap">
    <div class="title-container">
      <span class="line"></span>
      <p class="title">明细</p>
    </div>
    <div class="table-wrap">
      <a-table
        class="table-singe-line"
        :loading="tableLoading"
        :data="tableList"
        :scroll="{
          x: '100%',
          y: '100%',
        }"
        size="mini"
        @sorter-change="sorterChange"
        :pagination="false"
      >
        <template #columns>
          <a-table-column data-index="operationsName" :width="70" title="运营" fixed="left" />
          <a-table-column data-index="deptName" :width="150" title="部门" fixed="left" />

          <a-table-column data-index="purchasesSale" :width="65" title="销量" :sortable="sortable" />
          <a-table-column data-index="saleAmount" :width="90" title="销售额" :sortable="sortable">
            <template #title>
              <p>销售额({{ currentCode }})</p>
            </template>
          </a-table-column>
          <a-table-column data-index="returnQuantity" :width="80" title="退货量" :sortable="sortable" />
          <a-table-column data-index="refundAmount" :width="100" title="退款金额" :sortable="sortable">
            <template #title>
              <p>退款金额({{ currentCode }})</p>
            </template>
          </a-table-column>
          <a-table-column data-index="saleProfit" :width="90" title="毛利润" :sortable="sortable">
            <template #title>
              <p>毛利润({{ currentCode }})</p>
            </template>
          </a-table-column>
          <a-table-column data-index="cost" :width="100" title="广告花费" :sortable="sortable">
            <template #title>
              <p>广告花费({{ currentCode }})</p>
            </template>
          </a-table-column>
          <a-table-column data-index="adSaleAmount" :width="115" title="广告销售额" :sortable="sortable">
            <template #title>
              <p>广告销售额({{ currentCode }})</p>
            </template>
          </a-table-column>
          <a-table-column data-index="adPurchasesSale" :width="85" title="广告销量" :sortable="sortable" />
          <a-table-column data-index="acos" :width="80" title="ACOS" :sortable="sortable">
            <template #cell="{ record }">
              <p>{{ record.acos }}%</p>
            </template>
          </a-table-column>
          <a-table-column data-index="acots" :width="80" title="ACOTS" :sortable="sortable">
            <template #cell="{ record }">
              <p>{{ record.acots }}%</p>
            </template>
          </a-table-column>
          <a-table-column data-index="roas" :width="80" title="ROAS" :sortable="sortable">
            <template #cell="{ record }">
              <p>{{ record.roas }}%</p>
            </template>
          </a-table-column>
          <a-table-column data-index="asots" :width="80" title="ASOTS" :sortable="sortable">
            <template #cell="{ record }">
              <p>{{ record.asots }}%</p>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    <div class="pagination-footer">
      <a-pagination size="mini" :total="total" :default-page-size="searchVal.pageSize" :current="searchVal.pageNum" :page-size-options="[20, 50, 100, 200, 300]" show-total show-page-size @page-size-change="sizeChange" @change="changePage" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue'
  import { tableListsByUser } from '@/api/dataBoard'
  import { currencySymbol } from '@/utils/globalData'
  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
  })
  const searchVal = ref<any>({
    pageSize: 20,
    pageNum: 1,
  })

  const sortable = reactive({
    sortDirections: ['descend', 'ascend'],
    sorter: true,
  }) as any
  const total = ref(0)
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const currentCode = computed(() => currencySymbol[props.searchParams.currencyCode])

  // 分页
  function changePage(val: number) {
    searchVal.value.pageNum = val
    getTableList()
  }
  function sizeChange(val: number) {
    searchVal.value.pageSize = val
    getTableList()
  }
  function getTableListByVal() {
    searchVal.value.pageNum = 1
    getTableList()
  }

  // 获取列表数据
  async function getTableList() {
    if (!props.searchParams.startDate) return
    tableList.value = []
    tableLoading.value = true
    const res: any = await tableListsByUser({
      ...props.searchParams,
      ...searchVal.value,
    })
    tableLoading.value = false
    tableList.value = res?.data?.data || []
    total.value = res?.data?.total || 0
  }
  // 排序
  function sorterChange(dataIndex: string, direction: string) {
    if (!direction) {
      searchVal.value.orderItems = null
    } else {
      searchVal.value.orderItems = [
        {
          asc: direction == 'ascend' ? true : false,
          column: dataIndex,
        },
      ]
    }
    getTableList()
  }
  defineExpose({ getTableListByVal })
</script>
<style lang="less" scoped>
  .title-container {
    @text-color: #000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 10px 0;
    .title {
      color: var(--color-text-2);
      font-size: 15px;
      vertical-align: middle;
    }
    .line {
      display: inline-block;
      background-color: rgb(var(--primary-6));
      margin-right: 10px;
      width: 4px;
      height: 16px;
      border-radius: 4px;
    }
  }
  .sales-table-wrap {
    height: 100%;
    flex: 1;
    margin-top: 10px;
    padding: 0 15px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .table-wrap {
    flex: 1;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 0 10px;
  }
  :deep(.arco-table-sorter) {
    margin-left: 2px;
  }
</style>
